<template>
	<view class="page" :style="{ 'min-height': h + 'px', 'padding-top': (mt) + 'px' }">
		<!-- <customNavBar1 :title="title"></customNavBar1> -->
		<c-nav-bar :title="title"></c-nav-bar>

		<view class="pops">
			<view class="from-item-one">
				<view>求职类型</view>
				<view class="one-left">
					<view class="one" :class="colorindex == 1 ? 'active active1' : ''" @click="tab(1)">
						全职
					</view>
					<view class="two" :class="colorindex == 0 ? 'active active2' : ''" @click="tab(0)">
						兼职
					</view>
				</view>
			</view>
			<view class="from-item">
				<view class="text">期望工作地址</view>
				<view>
					<input type="text" class="u-ipt" v-model="dto.address" placeholder="请输入">
				</view>
			</view>
			<view class="from-item">
				<view class="text">期望职位</view>
				<view>
					<input style="text-align: right;" type="text" class="u-ipt" placeholder="请输入" v-model="dto.positionName">
				</view>
			</view>
			<view class="from-item">
				<view class="text">联系人姓名</view>
				<view>
					<input style="text-align: right;" type="text" class="u-ipt" placeholder="请输入" v-model="dto.realName">
				</view>
			</view>
			<view class="from-item">
				<view class="text">联系人电话</view>
				<view>
					<input style="text-align: right;" type="text" class="u-ipt" placeholder="请输入" v-model="dto.phone">
				</view>
			</view>
			<view class="from-item-two">
				<view>期望薪资</view>
				<view class="one-right" @click="showthree = true">
					<view style="display: flex;" v-if="dto.money == ''">
						请选择 <u-icon name="arrow-right"></u-icon>
					</view>
					<view v-else>
						{{ dto.money }}
					</view>
				</view>
			</view>
			<view class="from-item-two">
				<view>学历</view>
				<view class="one-right" @click="showTwo = true">
					<view style="display: flex;" v-if="dto.education == ''">
						请选择 <u-icon name="arrow-right"></u-icon>
					</view>
					<view v-else>
						{{ dto.education }}
					</view>
				</view>
			</view>
			<view class="from-item-two">
				<view>工作经验</view>
				<view class="one-right" @click="showOne = true">
					<view style="display: flex;" v-if="dto.experience == ''">
						请选择 <u-icon name="arrow-right"></u-icon>
					</view>
					<view v-else>
						{{ dto.experience }}
					</view>
				</view>
			</view>
			<view class="from-item">
				<view class="text">个人介绍</view>
				<view>
					<input style="text-align: right;" type="text" class="u-ipt" placeholder="请输入" v-model="dto.advantage">
				</view>
			</view>
		</view>

		<!-- 选择弹框 工作经验 -->
		<u-popup :show="showOne" @close="close" :round="24" @open="open">
			<view class="pop">
				<view class="hander">
					<view class="left" @click="showOne = false">
						取消
					</view>
					<view class="center">
						工作经验
					</view>
					<view class="right" @click="showOne = false">
						确定
					</view>
				</view>
				<view class="At-last" v-for="item, index in collegeList">
					<view class="item" @click="Degree(item, index)" :class="indexDb == index ? 'activeItem' : ''">
						{{ item.name }}
					</view>
				</view>

			</view>
		</u-popup>

		<!-- 选择弹框学历要求 -->
		<u-popup :show="showTwo" @close="close" :round="24" @open="open">
			<view class="pop">
				<view class="hander">
					<view class="left" @click="showTwo = false">
						取消
					</view>
					<view class="center">
						学历要求
					</view>
					<view class="right" @click="showTwo = false">
						确定
					</view>
				</view>

				<view class="At-last" v-for="item, index in JobList">
					<view class="item" @click="choose(item, index)" :class="indexDb == index ? 'activeItem' : ''">
						{{ item.name }}
					</view>
				</view>

			</view>
		</u-popup>

		<!-- 选择期待薪资 -->
		<u-popup :show="showthree" @close="close" :round="24" @open="open">
			<view class="pop">
				<view class="hander">
					<view class="left" @click="showthree = false">
						取消
					</view>
					<view class="center">
						期待薪资
					</view>
					<view class="right" @click="showthree = false">
						确定
					</view>
				</view>

				<view class="At-last" v-for="item, index in SalaryList">
					<view class="item" @click="Salary(item, index)" :class="indexDb == index ? 'activeItem' : ''">
						{{ item.name }}
					</view>
				</view>

			</view>
		</u-popup>


		<view class="bottom-input" @click="applyFor">
			<view>发布</view>
		</view>

		<!-- 授权手机登录 -->
		<GetPhoneNumber ref="phoneNumber" @loginSuccess="loginSuccess"></GetPhoneNumber>
	</view>


</template>

<script>
import GetPhoneNumber from '@/compoments/Getphonenumber/index.vue'
import inputBox from '@/compoments/inputBox/inputBox.vue'
export default {
	components: {
		GetPhoneNumber,
		inputBox,
	},
	data() {
		return {
			title: '发布求职',
			h: uni.getSystemInfoSync().windowHeight,
			mt: uni.getSystemInfoSync().statusBarHeight + 44,
			searchList: {},
			substrings: [],
			type: null,
			colorindex: 1,
			dto: {
				jobType: 1, //求职类型 0兼职 1全职
				address: '', //期望工作地址
				positionName: '', //职位名称
				realName: '', //姓名
				phone: '', //联系电话
				money: '', //	薪资待遇
				education: '', //学历
				experience: '', //工作经验
				advantage: '', //个人介绍
			},
			collegeList: [{
				name: '不限',
			},
			{
				name: '1年以下',
			},
			{
				name: '1-2年',
			},
			{
				name: '3-5年',
			},
			{
				name: '6-8年',
			},
			{
				name: '9-10年',
			},
			{
				name: '10年以上',
			}
			],
			JobList: [{
				name: '不限'
			}, {
				name: '高中',
			},
			{
				name: '中专/技校',
			},
			{
				name: '大专',
			},
			{
				name: '本科',
			},
			{
				name: '硕士',
			}
			],
			SalaryList: [{
				name: '1000-3000元'
			},
			{
				name: '3000-5000元'
			},
			{
				name: '6000-9000元'
			},
			{
				name: '10000-13000元'
			},
			{
				name: '面议'
			},
			],
			showOne: false,
			showTwo: false,
			indexDb: null,
			showOne: '',
			showthree: false

		};
	},


	// 招聘页面
	methods: {
		// 选择期望薪资
		Salary(item, index) {

			this.dto.money = item.name
			console.log('选择薪资待遇', this.dto.money);
			this.indexDb = index
		},
		//选择工作经验
		Degree(item, index) {
			this.dto.experience = item.name
			console.log('选择工作经验', this.dto.experience);
			this.indexDb = index
		},
		// 选择学历
		choose(item, index) {
			this.dto.education = item.name
			console.log('选择学历', this.dto.education);
			this.indexDb = index
		},
		// 选择招聘类型
		tab(index) {
			console.log(index);
			this.colorindex = index
			this.dto.jobType = index
		},
		// 发布
		applyFor(id) {
			if (!this.dto.jobType && this.dto.jobType !== 0) return this.$showToast('请选择求职类型');
			if (!this.dto.address) return this.$showToast('请输入期望工作地址');
			if (!this.dto.positionName) return this.$showToast('请输入期望职位名称');
			if (!this.dto.realName) return this.$showToast('请输入姓名');
			if (!this.$reg.mobile(this.dto.phone)) return this.$showToast('请输入正确的联系电话');
			if (!this.dto.money) return this.$showToast('请选择薪资待遇');
			if (!this.dto.education) return this.$showToast('请选择学历');
			if (!this.dto.experience) return this.$showToast('请选择工作经验');
			if (!this.dto.advantage) return this.$showToast('请输入个人介绍');

			let newDto = JSON.parse(JSON.stringify(this.dto));
			newDto.realName = this.$aesTm.encrypt(newDto.realName);
			newDto.phone = this.$aesTm.encrypt(newDto.phone);
			this.$api.post('/api/commjobhunt', newDto).then(res => {
				if (res.data.code == 0) {
					this.dto.jobType = '1'
					this.dto.positionName = ''
					this.dto.address = ''
					this.dto.realName = ''
					this.dto.phone = ''
					this.dto.money = ''
					this.dto.education = ''
					this.dto.workDescribe = ''
					this.dto.experience = ''
					this.dto.advantage = ''
					this.$showToast('发布成功');
				}
			})
		},
		open() {
			console.log('open');
		},

		close() {
			this.showOne = false
			this.showTwo = false
			this.showthree = false
			// console.log('close');
		},





	}
}
</script>
<style lang="less">
.u-ipt {
	border: none;
	outline: none;
	text-align: right;
	height: 102rpx;
	line-height: 102rpx;
	font-size: 30rpx;
	color: #666666;
	width: 440rpx;

	&::placeholder {
		font-size: 26rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #AAAAAA;
	}
}

.u-moreList {
	width: 60% !important;
}

.swiper {
	box-sizing: border-box;
	width: 100vw;
	height: 450rpx !important;
	backdrop-filter: blur(300px);
	background: rgba(251, 251, 251, .1);

}

.bottom-input {
	position: fixed;
	background-color: #FFFFFF;
	bottom: 0;
	height: 136rpx;
	padding: 0 30rpx;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	text-align: center;

	:nth-child(1) {
		height: 88rpx;
		line-height: 88rpx;
		width: 690rpx;
		background-color: #007A69;
		border-radius: 50rpx;
		font-size: 32rpx;
		font-weight: Regular;
		color: #FFFFFF;
		text-align: center;
		margin: 20rpx auto;
	}
}

.u-badge {
	padding: 0 !important;
	background-color: #FFFFFF !important;
	margin-left: -14rpx;
	color: #666666 !important;
	margin-top: 5rpx;
}

.u-input__content__field-wrapper__field {
	font-size: 24rpx;
	margin-left: 30rpx;
}

.indicator {
	// @include flex(row);
	display: flex;
	justify-content: center;

	&__dot {
		height: 6px;
		width: 6px;
		border-radius: 100px;
		background-color: rgba(255, 255, 255, 0.35);
		margin: 0 5px;
		transition: background-color 0.3s;

		&--active {
			background-color: #ffffff;
		}
	}
}

.u-modal__content__text {
	text-align: center !important;
}

.activeItem {
	background-color: #F5F8FA;
}
</style>

<style lang="scss">
.page {
	margin: 0;
	box-sizing: border-box;
	padding: 0;
	// background-color: aqua;
	// height: 100vh;
}

.pops {
	box-sizing: border-box;
	height: 45vh;
	margin: 24rpx;
}

.pop-titles {
	text-align: center;
	margin: 48rpx auto;
	font-size: 32rpx;
	color: #111111;

}

.from-item {
	// padding: 20rpx;
	height: 102rpx;
	line-height: 102rpx;
	// border: 1rpx solid #007A69;
	border-bottom: 1rpx solid #EFEFEF;
	font-size: 24rpx;
	text-align: right;
	// border-radius: 16rpx;
	display: flex;
	justify-content: space-between;

	.text {
		height: 102rpx;
		line-height: 102rpx;
		font-size: 30rpx;
		color: #666666;
		width: 240rpx;
		text-align: left;
	}

	:nth-child(2) {
		height: 102rpx;
		line-height: 102rpx;
		text-align: right;
	}

	.left {
		margin: 10rpx 0;
	}

	.right {
		// margin: 10rpx 0;
		margin-top: 10rpx;
	}

	text {
		display: block;
		color: #111;

		&:nth-child(2) {
			margin: 8rpx 0;
		}

		&:nth-child(3) {
			color: #007A69;
		}
	}

	&:last-child {
		// padding-top: 40rpx;

		text {
			color: #007A69;
		}

	}


}


.from-item-one {
	height: 102rpx;
	line-height: 102rpx;
	// border: 1rpx solid #007A69;
	border-bottom: 1rpx solid #EFEFEF;
	font-size: 30rpx;
	color: #333333;
	text-align: center;
	// border-radius: 16rpx;
	display: flex;
	justify-content: space-between;

	:nth-child(1) {
		width: 240rpx;
		text-align: left;
	}

	.one-left {
		margin-top: 20rpx;
		display: flex;
		width: 280rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		border: 1rpx solid #007A69;
		font-size: 30rpx;
		font-weight: Regular;
		color: #777777;
		// margin-right: 20rpx;
		border-radius: 8rpx;


		.one {
			width: 140rpx;
			text-align: center;
			border-radius: 8rpx 0 0 8rpx;

		}

		.two {
			width: 140rpx;
			border-radius: 0 8rpx 8rpx 0;

		}
	}
}

.from-item-two {
	height: 102rpx;
	line-height: 102rpx;
	// border: 1rpx solid #007A69;
	border-bottom: 1rpx solid #EFEFEF;
	font-size: 30rpx;
	color: #333333;
	text-align: center;
	// border-radius: 16rpx;
	display: flex;
	justify-content: space-between;

	.one-right {
		display: flex;
		height: 102rpx;
		line-height: 102rpx;
		text-align: center;
		border-radius: 8rpx;
		font-size: 30rpx;
		font-weight: Regular;
		color: #777777;
		// margin-right: 20rpx;
	}
}



.pop {
	height: 665rpx;
	border-radius: 24rpx 24rpx 0 0;
	padding: 30rpx 0;

	.hander {
		box-sizing: border-box;
		height: 113rpx;
		line-height: 113rpx;
		padding: 0 31rpx;
		display: flex;
		justify-content: space-between;

		.left {
			font-weight: Regular;
			font-size: 32rpx;
			color: #999999;
		}

		.right {
			font-weight: Regular;
			font-size: 32rpx;
			color: #007A69;
		}

		.center {
			font-weight: Bold;
			font-size: 32rpx;
			color: #1C1E41;
		}

	}

	.middle {
		box-sizing: border-box;
		width: 100%;
		// height: 136rpx;
		border-top: 1rpx solid #EFEFEF;
		border-bottom: 1rpx solid #EFEFEF;
		display: flex;
		// justify-content: space-around;
		text-align: center;

		.left {
			flex: 1;
			// background-color: aqua;

			.left-one {
				margin-top: 36rpx;
				font-weight: Regular;
				font-size: 26rpx;
				color: #88919D;
			}

			.left-two {
				margin-top: 24rpx;
				font-weight: Bold;
				font-size: 32rpx;
				color: #1C1E41;
				margin-bottom: 18rpx;
			}
		}

		.right {
			flex: 1;
			// background-color: antiquewhite;

			.right-one {
				margin-top: 36rpx;
				font-weight: Regular;
				font-size: 26rpx;
				color: #88919D;
			}

			.right-two {
				margin-top: 24rpx;
				font-weight: Bold;
				font-size: 32rpx;
				color: #1C1E41;
				margin-bottom: 18rpx;
			}
		}
	}

	.At-last {
		font-size: 36rpx;
		color: #1C1E41;
		font-weight: Bold;
		text-align: center;
		margin: 0 auto;


		.item {
			margin: 0 auto;
			height: 80rpx;
			line-height: 80rpx;
			width: 670rpx;
			border-radius: 24rpx;
		}
	}

}




.active {
	background-color: #007A69;
	color: #fff;
	margin-top: -1px;
}

.active1 {
	margin-left: -1px;
}

.active2 {
	margin-right: -1px;
}
</style>